import {Input, Text, View} from "@tarojs/components";
import styles from "./add_address.module.scss";
import {useEffect, useState} from "react";
import Taro from "@tarojs/taro";
import EventBus from "../../envent_bus/event_bus";
import {NewAddressBackToSelectAddress} from "../../envent_bus/events";
import {request} from "../../utils/request";
import {apis} from "../../constants/apis";
import globalData from "../../global_data";

const AddAddress = () => {
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [address, setAddress] = useState<any>('');

  useEffect(() => {
    return () => {
      EventBus.fire(NewAddressBackToSelectAddress.eventName, new NewAddressBackToSelectAddress());
    }
  }, []);

  const getInputName = (e) => {
    const name = e.detail.value;
    setName(name);
  }

  const getInputMobile = (e) => {
    setPhone(e.detail.value);
  }

  const getInputAddress = (e) => {
    setAddress(e.detail.value);
  }


  const isDisabled = () => {
    return !!(name && phone && address);
  }

  const addAddressClick = () => {
    if (!isDisabled()) return;
    if (phone.length !== 11) {
      Taro.showToast({
        title: "手机号码格式错误",
        icon: "error"
      })
      return;
    }
    request({
      url: apis.ADD_ADDRESS,
      data: {
        name: name,
        phone: phone,
        address: address,
        customerId: globalData.userInfo.id,
      },
      method: 'POST',
      pureData: false,
    }).then(res => {
      if (res.code === 200) {
        Taro.showToast({
          title: "添加地址成功",
          icon: "success",
        })
        Taro.navigateBack();
      } else {
        Taro.showToast({
          title: res.message,
          icon: "error",
        })
      }
    })
  }


  return (
    <View className={styles.add_body}>
      <View style={{marginTop: "40rpx", marginLeft: "38rpx"}} className="text-large text-bold">收货信息</View>
      <View className={styles.add_address_container}>

        <View className={styles.add_address_item}>
          <View className="color-third-text">收货人姓名</View>
          <Input maxlength={10} adjustPosition={false} style={{marginTop: "20rpx"}} type={"text"} onInput={(e) => {
            getInputName(e);
          }} placeholder={"请输入收货人姓名"}/>
          <View style={{marginTop: "20rpx", width: "90vw"}} className="divide-1-dark"/>
        </View>

        <View style={{marginTop: "30rpx"}} className={styles.add_address_item}>
          <View className="color-third-text">收货人手机号码</View>
          <Input adjustPosition={false} style={{marginTop: "20rpx"}} onInput={(e) => {
            getInputMobile(e)
          }} placeholder={"请输入收货人手机号码"}/>
          <View style={{marginTop: "20rpx", width: "90vw"}} className="divide-1-dark"/>
        </View>

        <View style={{marginTop: "30rpx"}} className={styles.add_address_item}>
          <View className="color-third-text">请输入地址</View>
          <Input adjustPosition={false} style={{marginTop: "20rpx"}} onInput={(e) => {
            getInputAddress(e)
          }} placeholder={"请输入收货地址"}/>


          <View style={{marginTop: "20rpx", width: "90vw"}} className="divide-1-dark"/>
        </View>

        <View style={{backgroundColor: isDisabled() ? '#FFB119' : '#DADADA'}} onClick={addAddressClick}
              className={styles.confirm_btn}><Text>确定</Text></View>
      </View>
    </View>
  )
}
export default AddAddress;
